<template>
	<view class="pageBox">
		<view class="listBox">
			<view class="top flex-center">
				<view class="topL">
					交易所
				</view>
				<view class="topR">
					账号
				</view>
			</view>

			<view class="list">
        <!-- @click="onListItem" -->
				<view class="listItem flex-center" v-for="(item,index) in info" :key="index">
					<view class="listItemL">
						{{item.label}}
					</view>
					<view class="listItemC">
						{{item.account}}
					</view>
					<!-- <view class="listItemR flex-center">
						<image class="delete" src="http://www.bobei.shop/static/my/delete.png" mode=""></image>
					</view> -->
				</view>
			</view>

		</view>


		<my-popup-tips :showTips="showTips" @tipsOpen="tipsOpen" :mask="true" @tipsClose="tipsClose">
			<template #default>
				<view class="tipsBox flex-row">
					<view class="tipsTitle flex-center">
						提示
					</view>

					<view class="failReason">
						确定删除？
					</view>

					<view class="tipsLine"></view>
					<view class="tipsBtnBox flex-center">
						<button class="sureBtn" :plain="true" @click="onSureBtn">确定</button>
					</view>
				</view>
			</template>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";

	export default {
		components: {
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				showTips: false,
				info: []
			}
		},
		onShow() {
			this.getAllExchange()
		},
		methods: {
			getAllExchange() {
				this.$post({
					module: 'Exchange',
					interface: 5000,
					data: {
						type: 2
					}
				}).then(res => {
					this.info = res
				})
			},

			onListItem() {
				this.showTips = true;
			},
			onSureBtn() {
				this.showTips = false;
			},
			tipsOpen(param) {
				// console.log("tips弹出", param)
        this.showTips = param;
			},
			tipsClose(param) {
				// console.log("tips关闭", param)
        this.showTips = param;
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		padding: 0 32rpx;

		.listBox {
			.top {
				width: 100%;

				.topL {
					width: 45%;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.topR {
					width: 45%;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}

			.list {
				margin-top: 60rpx;

				.listItem {
					margin: 20rpx 0;

					.listItemL {
						width: 45%;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.listItemC {
						width: 45%;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						word-break: break-all;
					}

					.listItemR {
						width: 10%;

						.delete {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}

		.tipsBox {
			width: 550rpx;
			height: 418rpx;
			padding-top: 64rpx;
			flex-direction: column;

			.tipsTitle {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}



			.failReason {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				margin-top: 48rpx;
			}

			.tipsLine {
				width: 100%;
				height: 2rpx;
				background-color: #EBEDF0;
				margin-top: 64rpx;
			}

			.tipsBtnBox {
				margin-top: 40rpx;

				.sureBtn {
					padding: 0;
					margin: 0 26rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					width: 200rpx;
					height: 72rpx;
					background: #F2615F;
					border-radius: 52rpx;
					border: none;
				}
			}
		}
	}
</style>
